<template>
  <div class="layout-main">
    <BtnMenu @click="btnGroupClick" class="btn-group-right"></BtnMenu>
    <BtnGroupStyle2Fuild @click="btnGroupClick" v-if="!ShowType" @close="closeHandler" @item_click="itemClickHandler" class="btn-group-left"></BtnGroupStyle2Fuild>
    <BtnGroupStyle2 @click="btnGroupClick" v-else @close="closeHandler" @item_click="itemClickHandler" class="btn-group-left"></BtnGroupStyle2>

    <BtnGroupStyle3 @click="btnGroupClick" class="btn-group-right2"></BtnGroupStyle3>
    <CommonDialog
      :title="dialogTitle"
      :component-name="displayCompName"
      :visible="store.dtsStore.showDialog"
      :width="dialogWidth"
      :height="dialogHeight"
      @close="closeComp"
    ></CommonDialog>
  </div>
</template>

<script setup lang="ts">
import router from '@/router'
import store from '@/stores'

// 弹窗组件名称
const displayCompName = ref('BaseInfoEnumItemDialog')
const displayCompVisible = ref(false)
const dialogTitle = ref('默认标题')
const dialogWidth = ref('600px')
const dialogHeight = ref('400px')
let ShowType=ref(true)
// 关闭弹窗组件名称
const closeComp = () => {
  // displayCompVisible.value = false
  store.dtsStore.setshowDialog(false)
}

// 按钮组
function btnGroupClick(item: any, count: any) {
  console.log(`第${count}次点了：`, item)
  switch (item.name) {
    case '切换版本':
    ShowType.value=false
      router.push({ path: '/sidebar' })

      break
    default:
      break
  }
}

// 关闭窗口
function closeHandler(e: any) {
  console.log('关闭窗口', e)
}

// 窗口点击
function itemClickHandler(result: any) {
  console.log('弹窗点击结果', result)
  let strClickItem = ''
  if (result?.water) {
    strClickItem = result.water[0]
  }
  switch (strClickItem) {
    case '水深流速曲线':
      //console.log('点了水深流速曲线')
      dialogTitle.value = '水深流速曲线'
      dialogWidth.value = '700px'
      dialogHeight.value = '400px'
      displayCompName.value = 'Hydrodynamic2d'
      displayCompVisible.value = true
      break
    case '水文站曲线':
      console.log('点了水文站曲线')
      dialogTitle.value = '水情-水文站曲线'
      dialogWidth.value = '1200px'
      dialogHeight.value = '600px'
      displayCompName.value = 'ShuiQing'
      displayCompVisible.value = true
      break
    case '工程安全评估':
      console.log('工程安全评估')
      dialogTitle.value = '工情-工程安全评估'
      dialogWidth.value = '100vw'
      dialogHeight.value = '100vh'
      displayCompName.value = 'SafetyAssessment'
      displayCompVisible.value = true
      break
    case '工情-滚动表格':
      console.log('点了工情-滚动表格')
      dialogTitle.value = '工情-测点滚动表格'
      dialogWidth.value = '600px'
      dialogHeight.value = '400px'
      displayCompName.value = 'ScrollTable'
      displayCompVisible.value = true
      break
    case '工情-重要测点曲线':
      console.log('点了工情-重要测点曲线')
      dialogTitle.value = '工情-重要测点曲线'
      dialogWidth.value = '500px'
      dialogHeight.value = '300px'
      displayCompName.value = 'ScalableChart'
      displayCompVisible.value = true
      break
    case '枚举-水库基本信息':
      console.log('点了枚举-水库基本信息')
      dialogTitle.value = '枚举-水库基本信息'
      dialogWidth.value = '600px'
      dialogHeight.value = '300px'
      displayCompName.value = 'BaseInfoEnumItem'
      displayCompVisible.value = true
      break
    case '水情-多年同期来水':
      dialogTitle.value = '水情-多年同期来水'
      dialogWidth.value = '1200px'
      dialogHeight.value = '600px'
      displayCompName.value = 'WaterOfMultiYear'
      displayCompVisible.value = true
      break
    case '列表项-结构缺陷':
      dialogTitle.value = '列表项-结构缺陷'
      dialogWidth.value = '420px'
      dialogHeight.value = '180px'
      displayCompName.value = 'DefectList'
      displayCompVisible.value = true
      break
    case '列表项-循环播报':
      dialogTitle.value = '列表项-循环播报'
      dialogWidth.value = '420px'
      dialogHeight.value = '100px'
      displayCompName.value = 'BroadcastParent'
      displayCompVisible.value = true
      break
    case '灾情-库区淹没经济损失':
      dialogTitle.value = '灾情-库区淹没经济损失'
      dialogWidth.value = '460px'
      dialogHeight.value = '300px'
      displayCompName.value = 'KuQuYanMo'
      displayCompVisible.value = true
      break
    case '工情-水库调度图':
      dialogTitle.value = '工情-水库调度图'
      dialogWidth.value = '1345px'
      dialogHeight.value = '750px'
      displayCompName.value = 'ShuiKuDiaoDu'
      displayCompVisible.value = true
      break
    case '雨情-严坪村':
      dialogTitle.value = '雨情-严坪村2号桥处模拟结果'
      dialogWidth.value = '1000px'
      dialogHeight.value = '480px'
      displayCompName.value = 'YuLiangZhan1'
      displayCompVisible.value = true
      break
    case '雨情-流域雨情':
      dialogTitle.value = '雨情-流域雨情'
      dialogWidth.value = '460px'
      dialogHeight.value = '320px'
      displayCompName.value = 'LiuYuYuQing'
      displayCompVisible.value = true
      break
    case '水情-水库水情':
      dialogTitle.value = '水情-水库水情'
      dialogWidth.value = '1355px'
      dialogHeight.value = '640px'
      displayCompName.value = 'ShuiKuShuiQing'
      displayCompVisible.value = true
      break
    case '水情-河道实时水情':
      dialogTitle.value = '水情-河道实时水情'
      dialogWidth.value = '450px'
      dialogHeight.value = '350px'
      displayCompName.value = 'HeDaoShuiQing'
      displayCompVisible.value = true
      break
    case '枚举-纳洪纳雨':
      dialogTitle.value = '枚举-纳洪纳雨'
      dialogWidth.value = '460px'
      dialogHeight.value = '246px'
      displayCompName.value = 'NaHongNaYu'
      displayCompVisible.value = true
      break
    case '雨情-降雨预报':
      dialogTitle.value = '雨情-降雨预报'
      dialogWidth.value = '1000px'
      dialogHeight.value = '600px'
      displayCompName.value = 'YuBaoJiangYu'
      displayCompVisible.value = true
      break
    case '水情-水库水位预报':
      dialogTitle.value = '水情-水库水位预报'
      dialogWidth.value = '900px'
      dialogHeight.value = '520px'
      displayCompName.value = 'YuBaoShuiKuShuiWei'
      displayCompVisible.value = true
      break
    case 'Dts其它-天气系统':
      dialogTitle.value = 'Dts其它-天气系统'
      dialogWidth.value = '800px'
      dialogHeight.value = '420px'
      displayCompName.value = 'WeatherSetting'
      displayCompVisible.value = true
      break
    default:
      break
  }
}
</script>

<style lang="scss" scoped>
.layout-main {
  position: absolute;
  width: 100%;
  height: calc(100% - $titleHeight);
  display: flex;
  margin-top: $titleHeight;
  overflow: hidden;
  .btn-group-left {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }

  .btn-group-right {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }

  .btn-group-right2 {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
  }
}
</style>
